<template>
	<view class="u-page fullpage u-bg-white">
		<zx-nav title="头条" bg="#fff"></zx-nav>
		<mescroll-body :top="CustomBar + 'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="list">
				<view class="flex justify-between u-border-bottom item" @click="detail(articleinfo)" v-for="(articleinfo, index) in articleList" :key="index">
					<u-image class="imgbox" v-if="articleinfo.img_url" width="210rpx" height="210rpx" :src="articleinfo.img_url" :lazy-load="true" mode="widthFix"></u-image>
					<view class="flex-sub flex flex-direction">
						<view class="title flex-sub">{{ articleinfo.name }}</view>
						<view class="flex justify-between align-center">
							<image class="icon1" src="/static/view.png" mode="widthFix"></image>
							<text class="flex-sub">{{ articleinfo.read }}</text>
							<image class="icon2" src="/static/clock.png" mode="widthFix"></image>
							<text>{{ articleinfo.created_at }}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			articleList: []
		};
	},
	components: {},
	methods: {
		upCallback(mescroll) {
			this.getArticleList();
		},
		//获取文章列表
		getArticleList() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				type: 13
			};
			this.$postAction(this.$api.getArticleList, param).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.articleList = []; //如果是第一页需手动制空列表
					this.articleList = this.articleList.concat(curPageData); //追加新数据
				} else {
					this.articleList = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		},
		detail(articleinfo) {
			uni.navigateTo({
				url: '/pages/article/details?id=' + articleinfo.id
			});
		}
	}
};
</script>

<style lang="scss">
.list {
	margin: 0 28upx;
}
.item {
	padding: 28upx 0;
	font-size: 24upx;
	color: $u-tips-color;
	.imgbox {
		margin-right: 24upx;
	}
	.title {
		font-size: 32upx;
		color: #000;
		line-height: 45upx;
		font-weight: 500;
		min-height: 80upx;
	}
	.icon1,
	.icon2 {
		margin-right: 8upx;
	}
	.icon1 {
		width: 24upx;
		height: 18upx;
	}
	.icon2 {
		width: 20upx;
		height: 20upx;
	}
}
</style>
